<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 1000px;
            color: black;
            overflow: hidden;
            background-color: pink;
            position: relative;
        }
        main{
            height: 100px;
            background-image: linear-gradient(pink,black);
        }
    </style>
</head>
<body>
    <div>
        <p>p1</p>
        <p>p2</p>
        <p>p3</p>
        <p>p4</p>
        <p>p5</p>
        <p>p6</p>
        <p>p7</p>
        <p>p8</p>
        <p>p9</p>
        <p>p10</p>
        <p>p11</p>
        <p>p12</p>
        <p>p13</p>
        <p>p14</p>
        <p>p15</p>
        <p>p16</p>
        <p>p17</p>
        <p>p18</p>
        <p>p19</p>
        <p>p20</p>
        <p>p21</p>
        <p>p22</p>
        <p>p23</p>
        <p>p24</p>
        <p>p25</p>
        <p>p26</p>
        <p>p27</p>
        <p>p28</p>
        <p>p29</p>
        <p>p30</p>
        <p>p31</p>
        <p>p32</p>
        <p>p33</p>
        <p>p34</p>
        <p>p35</p>
        <p>p36</p>
        <p>p37</p>
        <p>p38</p>
        <p>p39</p>
        <p>p40</p>
        <p>p41</p>
        <p>p42</p>
        <p>p43</p>
        <p>p44</p>
        <p>p45</p>
        <p>p46</p>
        <p>p47</p>
        <p>p48</p>
        <p>p49</p>
        <p>p50</p>
        <p>p51</p>
        <p>p52</p>
        <p>p53</p>
        <p>p54</p>
        <p>p55</p>
        <p>p56</p>
        <p>p57</p>
        <p>p58</p>
        <p>p59</p>
        <p>p60</p>
        <p>p61</p>
        <p>p62</p>
        <p>p63</p>
        <p>p64</p>
        <p>p65</p>
        <p>p66</p>
        <p>p67</p>
        <p>p68</p>
        <p>p69</p>
        <p>p70</p>
        <p>p71</p>
        <p>p72</p>
        <p>p73</p>
        <p>p74</p>
        <p>p75</p>
        <p>p76</p>
        <p>p77</p>
        <p>p78</p>
        <p>p79</p>
        <p>p80</p>
        <p>p81</p>
        <p>p82</p>
        <p>p83</p>
        <p>p84</p>
        <p>p85</p>
        <p>p86</p>
        <p>p87</p>
        <p>p88</p>
        <p>p89</p>
        <p>p90</p>
        <p>p91</p>
        <p>p92</p>
        <p>p93</p>
        <p>p94</p>
        <p>p95</p>
        <p>p96</p>
        <p>p97</p>
        <p>p98</p>
        <p>p99</p>
    </div>
    <br>
    <main></main>
    <script>
        window.onresize = function(){
            console.log("浏览器窗口大小更改了");
        }

         var div = document.querySelector("div");
        window.onkeydown = function(e){
            console.log("键盘按下事件",e);
            // e.key 是按下的键值
            // e.keyCode  是按下的键的键码值
            console.log(e.key);
            console.log(e.keyCode);
            var a = div.getBoundingClientRect();
            console.log(a);
            if(e.keyCode == 68){  // d 68
                div.style.left = a.left + 2 + "px";
            }
            if(e.keyCode == 65){  // a 65
                div.style.left = a.left - 4 + "px";
            }
        }
        window.onkeyup = function(){
            console.log("键盘抬起事件");
        }
        window.onkeypress = function(){
            console.log("键盘点击事件");
        }
        
        // 内容卷起事件
        window.onscroll = function(){
            console.log("页面滚动事件");
            // 获取文档呗卷走内容的高度
            console.log(document.documentElement.scrollTop);
        }
        // 
        window.onwheel = function(){
            console.log("滚轮事件");
        }
       
        div.onscroll = function(){
            // console.log("===");
            console.log(div.scrollTop);
        }
        div.onclick = function(){
            console.log("点击");
            // 设置页面被卷起内容的高度
            document.documentElement.scrollTop = 200;
        }

        // onclick 单击事件
        // div.onclick = function(){
        //     console.log("div被点击了");
        // }
        // ondblclick 双击事件
        // div.ondblclick = function(){
        //     console.log("div被点击了");
        // }
        // oncontextmenu 右键点击事件
        // div.oncontextmenu = function(){
        //     console.log("div被点击了");
        // }

        // 给目标元素，以及所有后代元素都添加时间
        // onmouseover 事件
        // div.onmouseover = function(){
        //     console.log("鼠标放下了");
        // }
        // // onmouseout 事件
        // div.onmouseout = function(){
        //     console.log("鼠标抬起了");
        // }
        // 只给目标元素添加，只有在鼠标进入该元素的瞬间才会被触发
        // onmouseenter 事件
        // div.onmouseenter = function(){
        //     console.log("鼠标放下了");
        // }
        // // onmouseleave 右键点击事件
        // div.onmouseleave = function(){
        //     console.log("鼠标抬起了");
        // }
    </script>
</body>
</html>